<template>
    <div>
        <ConditionCard
            body-style="padding: 24px"
            class="groupList-addUser"
            @search="queryTableList"
            @reset="reset"
        >
            <el-form ref="queryForm" :model="queryForm" label-width="80px" label-suffix="：">
                <el-row :gutter="2">
                    <el-col :span="8">
                        <el-form-item :label="$t('exchangeApproval.yearAndSemester')">
                            <CalendarSelect
                                v-model="queryForm.condition.calendarId"
                            ></CalendarSelect>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('exchangeApproval.studentNumber')">
                            <el-input
                                v-model="queryForm.condition.stuId"
                                style="width: 100%"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="$t('exchangeApproval.fullName')">
                            <el-input
                                v-model="queryForm.condition.studentName"
                                style="width: 100%"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ConditionCard>
        <el-card>
            <el-row type="flex" justify="space-between" align="center" style="margin-bottom:16px">
                <el-col :span="12">
                    <h1 slot="header">{{$t('exchangeApproval.queryList')}}</h1>
                </el-col>
                <el-col :span="12" style="text-align:right">
                    <el-button type="primary" @click="certificateDownload">{{$t('exchangeApproval.certificateDownload')}}</el-button>
                    <el-button type="primary" @click="downLoad">{{$t('exchangeApproval.clickUpload')}}</el-button>
                </el-col>
            </el-row>
            <edu-table
                :data="tableList"
                :total="queryForm.total_"
                :pageSize="queryForm.pageSize_"
                @page-change="onCurrentPageChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column :label="$t('exchangeApproval.studentNumber')" prop="studentId" width="80"></el-table-column>
                <el-table-column
                   :label="$t('exchangeApproval.fullName')"
                    prop="studentName"
                    width="80"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                   :label="$t('exchangeApproval.yearAndSemester')"
                    prop="calendarName"
                     width="170"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('exchangeApproval.exchangeName')"
                    prop="exchangesName"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                   :label="$t('exchangeApproval.schoolName')"
                    prop="exchangesUniversityNameZH"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('exchangeApproval.exchangesStartTime')"
                    prop="exchangesStartTime"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('exchangeApproval.exchangesEndTime')"
                    prop="exchangesEndTime"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    :label="$t('exchangeApproval.applicationDate')"
                    show-overflow-tooltip
                    prop="createTime"
                ></el-table-column>
                <el-table-column :label="$t('exchangeApproval.operate')" fixed="right" width="140px">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleOperate('VIEW', scope.row)">
                             {{$t('exchangeApproval.check')}}
                        </el-button>
                    </template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { applyList, certificateDownload} from 'common/src/api/internationalExchanges/exchangeApplication'
import { exportApplyList } from 'common/src/api/internationalExchanges/exchangeApproval'
export default {
    data() {
        return {
            queryForm: {
                total_: 0,
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    ids: [],
                    calendarId: '',
                    stuId: '',
                    studentName: '',
                    queryType: 2
                }
            },
            tableList: []
        }
    },
    mounted() {
        this.queryTableList()
    },
    methods: {
        async queryTableList(params = this.queryForm) {
            let { code, data } = await applyList(params)
            if (code !== 200) return
            this.tableList = data.list
            this.queryForm.total_ = data.total_
            this.queryForm.pageNum_ = data.pageNum_
            this.queryForm.pageSize_ = data.pageSize_
        },
        handleSelectionChange(val) {
            this.queryForm.condition.ids = val.map(item => item.id)
        },
        onCurrentPageChange(pager) {
            this.queryForm.pageSize_ = pager.pageSize
            this.queryForm.pageNum_ = pager.pageNum
            this.queryTableList()
        },
        handleOperate(mode, data) {
            switch (mode) {
                //查看
                case 'VIEW':
                    this.$router.push({
                        name: 'UGIEApprovalDetail',
                        params: {
                            data,
                            mode
                        }
                    })
                    break
            }
        },
        downLoad() {
            let params = JSON.parse(JSON.stringify(this.queryForm.condition));
            // let params = this.queryForm.condition
            delete params.queryType
            Object.assign(params, {
                type: 1
            })
            console.log("params",params)
            console.log("condition",this.queryForm.condition)
            exportApplyList(params)
        },
        reset() {
            let condition = this.queryForm.condition
            for (let key in condition) {
                if (key == 'ids') {
                    condition[key] = []
                } else if (key !== 'calendarId' && key !== 'queryType' ) {
                    condition[key] = ''
                }
            }
            this.queryForm.total_ = 0
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            this.queryTableList()
        },
        certificateDownload() {
            let params = {
                ids: this.queryForm.condition.ids
            }
            if (!params.ids || !params.ids.length) {
                this.$message({
                    type: 'warning',
                    message: '请先选择需要下载的列表记录'
                })
                return;
            }
            certificateDownload(params);
        }
    }
}
</script>
<style lang="scss" scoped>
</style>
